import React, { Component } from 'react';
import './App.scss';
import Signln from '../components/Signln'
import Register from '../components/Register'
import axios from 'axios'

import {
  HashRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch
} from "react-router-dom";

// 导入页面组件
import Home from '../Home/Home';
import Product from '../Product/Product';
import About from '../About/About';
import Contact from '../Contact/Contact';
import { get } from 'echarts/lib/CoordinateSystem';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      switch_data: true,
      switch_signln: true,
      nickname: []
    }
  }
  switchLogin_state(state, states, nicknames) {
    this.setState({
      switch_data: state,
      switch_signln: states,
      nickname: nicknames
    })
  }
  render() {
    return (
      <div className="App">{
        this.state.switch_signln ?
          <div >
            {
              this.state.switch_data ?
                <Signln switchLogin_state={this.switchLogin_state.bind(this)} /> :
                <Register switchLogin_state={this.switchLogin_state.bind(this)} />
            }
          </div> :
          <Router>
            <div className="Appbox">
              <header className="App-header">
                <div className="header-left">
                  库存管理系统
                      </div>
                <div className="header-right">
                  <span>你好,</span>
                  <span onClick={() =>
                    this.switchLogin_state(true, true)}>{this.state.nickname}</span>
                  <span>!</span>
                </div>
              </header>
              <div className="main-content">
                <ul className="nav justify-content-center">
                  <li className="nav-item">
                    <WebLink
                      to="/"
                      label="管理首页"
                      activeOnlyWhenExact={true}
                    />
                  </li>
                  <li className="nav-item">
                    <WebLink
                      to="/product"
                      label="库存信息管理"
                      activeOnlyWhenExact={true}
                    />
                  </li>
                  <li className="nav-item">
                    <WebLink
                      to="/about"
                      label="商品信息录入"
                      activeOnlyWhenExact={true}
                    />
                  </li>
                  <li className="nav-item">
                    <WebLink
                      to="/contact"
                      label="联系管理员"
                      activeOnlyWhenExact={true}
                    />
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" onClick={() =>
                      this.switchLogin_state(true, true)}>退出登录</a>
                  </li>
                </ul>
                <main>
                  <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/product" component={Product} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />
                  </Switch>
                </main>
              </div>
            </div>
          </Router>
      }
      </div>);
  }
}
function WebLink({ label, to, activeOnlyWhenExact }) {
  let match = useRouteMatch({
    path: to,
    exact: activeOnlyWhenExact
  });

  return (
    <Link
      to={to}
      className={`nav-link ${match ? "active" : ""}`}
    >{label}</Link>
  );
}
export default App;
